<template>
  <n-drawer v-model:show="active" width="84%">
    <n-drawer-content body-style="--n-body-padding:0">
      <div class="pay">
        <div class="pay_left">
          <p class="pay_left-title">选择支付方式</p>
          <div class="pay_left-wallet" :class="{ 'pay_left-wallet--active' : true }">
            <div class="pay_left-wallet--active_icon iconfont icon-queding"></div>
            <p class="w-title">至尊钱包</p>
            <label class="w-checkbox">
              <input type="checkbox">
              <span>钱包余额为￥200</span>
            </label>
            <div class="w-input">
              <span>钱包余额支付</span>
              <input type="number">
              <span>元</span>
            </div>
            <label class="w-checkbox">
              <input type="checkbox">
              <span>奖励余额为￥200</span>
            </label>
            <div class="w-input">
              <span>奖励余额支付</span>
              <input type="number">
              <span>元</span>
            </div>
          </div>
          <div class="pay_left-tip">
            <div class="t-title">
              <div class="t-title_icon">?</div>
              <span>说明：</span>
            </div>
            <p>选择钱包支付可单独选择【余额支付】或【奖励余额支付】也可以合并一起支
              付；合并支付无需手动输入金额，只需选择钱包即可。</p>
            <p>如需单独选择支付，点击【输入框】里进行输入您要支付的金额。</p>
          </div>
          <div class="pay_left-radio">
            <button class="pay_left-radio-item" :class="{ 'pay_left-radio-item--active' :  true}">
              <div class="pay_left-radio-item--active_icon iconfont icon-queding">
              </div>
              <span class="pay_left-radio-item--icon iconfont icon-weixinzhifu"></span>微信
            </button>
            <button class="pay_left-radio-item" :class="{ 'pay_left-radio-item--active' :  false}">
              <div class="pay_left-radio-item--active_icon iconfont icon-queding"></div>
              更多支付
            </button>
          </div>
          <p class="pay_left-title">选择操作员</p>
          <div class="pay_left-radio">
            <button class="pay_left-radio-item" :class="{ 'pay_left-radio-item--active' :  true}">
              <div class="pay_left-radio-item--active_icon iconfont icon-queding"></div>
              李建霞
            </button>
          </div>
        </div>
        <div class="pay_right">
          <div class="pay_right-card">
            <p>李建新 <span>13625482699</span></p>
            <p>会员类型：<span>至尊会员</span>
            </p>
          </div>
          <div class="pay_right-content">
            <template v-if="false">
              <div class="pay_right-content_item">
                <span>兑换数量</span>
                <span>1件</span>
              </div>
              <div class="pay_right-content_item">
                <span>兑换使用</span>
                <span>5积分</span>
              </div>
              <div class="pay_right-content_item">
                <span>会员所剩积分</span>
                <span>10积分</span>
              </div>
            </template>
            <div class="pay_right-content_item">
              <span>订单数量</span>
              <span>1件</span>
            </div>
            <div class="pay_right-content_item">
              <span>订单积分</span>
              <span>1积分</span>
            </div>
            <div class="pay_right-content_item">
              <span>订单金额</span>
              <span>248.00元</span>
            </div>
            <div class="pay_right-content_item">
              <span>赠送商品</span>
              <span style="color:#ec3f14">-248.00元</span>
            </div>
            <div class="pay_right-content_item" style="border-bottom:1px solid #e8e8e8">
              <span>应付金额</span>
              <span>248.00元</span>
            </div>
            <div class="pay_right-content_item">
              <span>钱包余额支付</span>
              <span>48.00元</span>
            </div>
            <div class="pay_right-content_item">
              <span>奖励余额支付</span>
              <span>48.00元</span>
            </div>
            <div class="pay_right-content_item">
              <span>微信支付</span>
              <span>152.00元</span>
            </div>
            <div class="pay_right-content_item" style="color:#fe9d0e">
              <span>还需支付</span>
              <span>2.00元</span>
            </div>
          </div>
          <div class="pay_right-footer">
            <button class="pay_right-footer_btn pay_right-footer_btn--cancel" @click="active=false">取消结算</button>
            <button class="pay_right-footer_btn pay_right-footer_btn--confirm">结算并打印</button>
          </div>
        </div>
      </div>
    </n-drawer-content>
  </n-drawer>
</template>

<script setup>
  import {
    inject
  } from "vue";

  const active = inject('payDrawerActive');
</script>

<style lang="less" scoped>
  .pay {
    display: flex;
    height: 100vh;

    &_left {
      flex: 1;
      padding: 0 30px;
      border-right: 1px solid #E5E5E5;

      &-title {
        position: relative;
        padding-left: 20px;
        margin: 20px 0;
        font-size: 22px;
        font-weight: 500;
        color: #4A5060;

        &::before {
          position: absolute;
          top: 6px;
          left: 0;
          content: "";
          width: 6px;
          height: 24px;
          background: #373B4F;
        }
      }

      &-wallet {
        width: 538px;
        height: 330px;
        padding: 0 20px;
        margin-bottom: 20px;
        background: #F8F8FA;
        border: 1px solid #DDDEE2;
        border-radius: 4px;

        &--active {
          position: relative;
          background: #E6F2FF;
          border: 1px solid #1981F4;

          &::after {
            position: absolute;
            top: 0;
            right: 0;
            content: "";
            width: 0;
            height: 0;
            border-top: 40px solid #1981F4;
            border-left: 40px solid transparent;
          }

          &_icon {
            position: absolute;
            top: -2px;
            right: 4px;
            z-index: 99;
            font-size: 18px;
            color: #FFF;
          }
        }

        .w-title {
          height: 63px;
          line-height: 63px;
          font-size: 24px;
          font-weight: 500;
          color: #2E323D;
        }

        .w-checkbox {
          display: flex;
          align-items: center;
          margin: 15px 0;

          >input {
            width: 22px;
            height: 22px;
            margin-right: 20px;
            border-radius: 4px;
          }

          >span {
            font-size: 18px;
            font-weight: 500;
            color: #4A5060;
          }
        }

        .w-input {
          padding-left: 40px;

          >span {
            font-size: 22px;
            font-weight: 500;
            color: #2E323D;
          }

          >input {
            width: 180px;
            height: 60px;
            margin: 0 20px;
            font-size: 26px;
            font-weight: 500;
            color: #2E323D;
            text-align: center;
            background: #FFF;
            border: 1px solid #1981F4;
            border-radius: 5px;
          }
        }

      }

      &-tip {
        width: 837px;
        height: 156px;
        padding: 20px;
        margin-bottom: 20px;
        background: #FFF7EC;
        border-radius: 4px;

        .t-title {
          display: flex;
          align-items: center;

          &_icon {
            width: 24px;
            height: 24px;
            margin-right: 10px;
            text-align: center;
            line-height: 24px;
            color: #FE9900;
            border: 1px solid #FE9900;
            border-radius: 50%;
          }

          >span {
            font-size: 22px;
            font-weight: 400;
            color: #4A5060;
          }
        }

        >p {
          position: relative;
          width: 747px;
          height: 53px;
          margin-left: 65px;
          margin-bottom: 20px;
          font-size: 22px;
          font-weight: 500;
          color: #fe9900;
          line-height: 30px;

          &::before {
            position: absolute;
            left: -20px;
            top: 11px;
            content: "";
            width: 10px;
            height: 10px;
            background: #000;
            border-radius: 50%;
          }
        }
      }

      &-radio {
        display: flex;

        &-item {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 158px;
          height: 60px;
          margin-right: 20px;
          margin-bottom: 20px;
          font-size: 24px;
          font-weight: 400;
          color: #4A5060;
          line-height: 60px;
          background: #F4F4F4;
          border: 2px solid #DDDEE2;
          border-radius: 4px;

          &--icon {
            margin-right: 10px;
            font-size: 30px;
            color: #09bb07;
          }

          &--active {
            position: relative;
            background: #E6F2FF;
            border: 1px solid #1981F4;

            &::after {
              position: absolute;
              top: 0;
              right: 0;
              content: "";
              width: 0;
              height: 0;
              border-top: 30px solid #1981F4;
              border-left: 30px solid transparent;
            }

            &_icon {
              position: absolute;
              top: -20px;
              right: 0;
              z-index: 99;
              font-size: 18px;
              color: #FFF;
            }
          }
        }
      }
    }

    &_right {
      display: flex;
      flex-direction: column;
      width: 610px;
      padding: 30px;

      &-card {
        width: 570px;
        height: 78px;
        padding: 20px;
        background: #6D6E83;
        box-shadow: 0px 3px 8px 0px rgba(31, 31, 31, 0.4);
        border-radius: 4px;

        >p {
          &:nth-child(1) {
            margin-top: 10px;
            font-size: 36px;
            font-weight: bold;
            color: #FFF;
            line-height: 18px;
            text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.4);

            >span {
              margin-left: 10px;
            }
          }

          &:nth-child(2) {
            margin-top: 30px;
            font-size: 26px;
            font-weight: 400;
            color: #DDDEE2;
            line-height: 18px;

            >span {
              color: #FFF;
            }
          }
        }
      }

      &-content {
        flex: 1;
        overflow-y: auto;

        &_item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 84px;
          font-size: 26px;
          font-weight: 500;
          color: #4A5060;
        }
      }

      &-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 68px;

        &_btn {
          width: 296px;
          height: 68px;
          font-size: 30px;
          font-weight: 500;
          text-align: center;
          line-height: 68px;
          border-radius: 4px;

          &--cancel {
            color: #4A5060;
            background: #F8F8F8;
            border: 1px solid #E5E5E5;
          }

          &--confirm {
            color: #FFF;
            background: #1981F4;
            border-radius: 4px;
          }
        }
      }

    }
  }
</style>